<template>
  <div class="report-center">
    <div class="page-header">
      <h2>报表中心</h2>
      <p>企业经营数据报表与分析</p>
    </div>
    
    <div class="report-content">
      <div class="report-categories">
        <div class="category-card" v-for="category in reportCategories" :key="category.id">
          <div class="category-icon" :style="{background: category.color}">
            {{ category.icon }}
          </div>
          <div class="category-info">
            <h3>{{ category.name }}</h3>
            <p>{{ category.description }}</p>
            <div class="report-count">{{ category.reportCount }} 个报表</div>
          </div>
          <button class="view-btn" @click="viewCategory(category)">查看</button>
        </div>
      </div>
      
      <div class="recent-reports">
        <div class="section-header">
          <h3>最近生成的报表</h3>
          <button class="refresh-btn" @click="loadRecentReports">刷新</button>
        </div>
        
        <div class="reports-table">
          <table>
            <thead>
              <tr>
                <th>报表名称</th>
                <th>类型</th>
                <th>生成时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="report in recentReports" :key="report.id">
                <td>{{ report.name }}</td>
                <td>{{ report.type }}</td>
                <td>{{ formatDate(report.createTime) }}</td>
                <td>
                  <span :class="getStatusClass(report.status)">{{ report.status }}</span>
                </td>
                <td>
                  <button class="action-btn download" @click="downloadReport(report)">下载</button>
                  <button class="action-btn view" @click="viewReport(report)">查看</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReportCenter',
  data() {
    return {
      reportCategories: [
        {
          id: 1,
          name: '销售报表',
          description: '销售业绩、客户分析等报表',
          icon: '📊',
          color: '#409eff',
          reportCount: 12
        },
        {
          id: 2,
          name: '财务报表',
          description: '收支明细、利润分析等报表',
          icon: '💰',
          color: '#67c23a',
          reportCount: 8
        },
        {
          id: 3,
          name: '库存报表',
          description: '库存统计、出入库分析等报表',
          icon: '📦',
          color: '#e6a23c',
          reportCount: 6
        },
        {
          id: 4,
          name: '生产报表',
          description: '生产进度、质量分析等报表',
          icon: '🏭',
          color: '#f56c6c',
          reportCount: 10
        }
      ],
      recentReports: [
        {
          id: 1,
          name: '2024年1月销售汇总报表',
          type: '销售报表',
          createTime: '2024-01-15 10:30:00',
          status: '已完成'
        },
        {
          id: 2,
          name: '库存盘点报表',
          type: '库存报表',
          createTime: '2024-01-14 16:20:00',
          status: '已完成'
        },
        {
          id: 3,
          name: '月度财务报表',
          type: '财务报表',
          createTime: '2024-01-13 09:15:00',
          status: '生成中'
        }
      ]
    }
  },
  methods: {
    viewCategory(category) {
      console.log('查看分类:', category.name)
    },
    
    loadRecentReports() {
      console.log('刷新最近报表')
    },
    
    downloadReport(report) {
      console.log('下载报表:', report.name)
    },
    
    viewReport(report) {
      console.log('查看报表:', report.name)
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    },
    
    getStatusClass(status) {
      const statusMap = {
        '已完成': 'status-completed',
        '生成中': 'status-processing',
        '失败': 'status-failed'
      }
      return statusMap[status] || 'status-default'
    }
  }
}
</script>

<style scoped>
.report-center {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.report-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.category-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.category-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.category-info {
  flex: 1;
}

.category-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.category-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #909399;
}

.report-count {
  font-size: 12px;
  color: #67c23a;
  font-weight: bold;
}

.view-btn {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.view-btn:hover {
  background: #337ecc;
}

.recent-reports {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.refresh-btn {
  padding: 6px 12px;
  background: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.refresh-btn:hover {
  background: #529b2e;
}

.reports-table {
  overflow-x: auto;
}

.reports-table table {
  width: 100%;
  border-collapse: collapse;
}

.reports-table th,
.reports-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.reports-table th {
  background: #f5f7fa;
  font-weight: bold;
  color: #303133;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 8px;
}

.action-btn.download {
  background: #409eff;
  color: white;
}

.action-btn.view {
  background: #67c23a;
  color: white;
}

.action-btn:hover {
  opacity: 0.8;
}

.status-completed {
  color: #67c23a;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-processing {
  color: #e6a23c;
  background: #fdf6ec;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-failed {
  color: #f56c6c;
  background: #fef0f0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>